HTML5 Canvas Graph with RGraph Graph Library




HTML5 introduces a new HTML element: the CANVAS tag. This tag allows for two dimensional drawing easily using Javascript. This makes it perfect for producing graphs. You've already seen how to draw basic shaps in my previous tutorial Drawing on the Canvas, but drawing something complex requires a lot more JavaScript. We need a graphing library to help us along.

 

RGraph Library

RGraph is a HTML5 canvas graph library based on the canvas tag. Like most graph library, RGraph support wide variety of graph types including bar chart, pie chart, radar chart, etc.

It ridiculously simple to draw graphs using the HTML5 canvas. It's a pure JavaScript solution, though, so it won't work for those user agents that don't have JavaScript available, but then again, neither will the canvas.

Here's the code for a very simple bar graph:

var bar = new RGraph.Bar('sales', [558,1155,711,248]);

bar.Set('chart.gutter', 50);

bar.Set('chart.colors', ['green']);

bar.Set('chart.title', "A bar graph of car sales in America" );

bar.Set('chart.labels', ["Audi" , "BMW" , "Lexus" , "Volvo" ]);

bar.Draw();

All we have to do is create a couple of JavaScript arrays, and the library draws the graph on the canvas for us.

Drawing Simple Graph

Download the Rgraph html 5.0 canvas libraries, and place the files in libraries folder into  the 'js' folder.

We're using bar graph, so we need both the RGraph Bar graph library and ' the core RGraph library. We'll also use jQuery to grab the data out of the document. In the head section of the HTML page, we need to load the libraries we need.


Full Code

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Graphing with RGraph graph Library</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="/js/RGraph.common.core.js" ></script>

<script src="/js/RGraph.bar.js" ></script>

<script type="text/javascript">

var drawGraph = function(){

var canvas = document.getElementById('sales');

var context = canvas.getContext('2d');

' 

var bar = new RGraph.Bar('sales', [558,1155,711,248]);

bar.Set('chart.gutter', 50);

bar.Set('chart.colors', ['green']);

bar.Set('chart.title', "A bar graph of car sales in America" );

bar.Set('chart.labels', ["Audi" , "BMW" , "Lexus" , "Volvo" ]);

bar.Draw();

};

$(function(){

var canvas = document.getElementById('sales');

if (canvas.getContext){

drawGraph();

}

});

</script>

</head>

<body>

<canvas id="sales" width="500" height="200">

Fallback content here

</canvas>

</body>

</html>

Demo

 

 

Describing Data with HTML

<div id="graph_data">

<h1>Browser share for this site</h1>

<ul>

<li>

<p data-name="Safari 4" data-percent="15">

Safari 4 - 15%

</p>

</li>

<li>

<p data-name="Internet Explorer" data-percent="55">

Internet Explorer - 55%

</p>

</li>

<li>

<p data-name="Firefox" data-percent="14">

Firefox - 14%

</p>

</li>

<li>

<p data-name="Google Chrome" data-percent="16">

Google Chrome - 16%

</p>

</li>

</ul>

</div>

We'€™ r e using the HTML5 data attributes to store the browser names and the percentages. Although we have that information in the text.

Output



This will be your fallback content for mobile devices and other users where either the canvas element or JavaScript is not available.

 

Turning HTML into Graph

function canvasGraph(){

var title = $('#graph_data h1').text();

 

var labels = $("#graph_data>ul>li>p[data-name]").map(function(){

return $(this).attr("data-name");

});

 

var percents = $("#graph_data>ul>li>p[data-percent]").map(function(){

return parseInt($(this).attr("data-percent"));

});

 

var bar = new RGraph.Bar('sales', percents);

bar.Set('chart.gutter', 50);

bar.Set('chart.colors', ['blue']);

bar.Set('chart.title', title);

bar.Set('chart.labels', labels);

bar.Draw();

 

}

 

var canvas = document.getElementById('sales');

if (canvas.getContext){

$('#graph_data').hide();

canvasGraph();

}

First, on line 2, we grab the text for the header. Then, on line 4, we select all the elements that have the data-name attribute. We use jQuery'€™s map function to turn the values from those elements into an array.

We use that same logic again on line 8 to grab an array of the percentages.

We simply leave the data outside the canvas and then hide it with jQuery once we'€™ve checked that the canvas exists.

Full Code 

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Graphing with RGraph graph Library</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="/js/RGraph.common.core.js" ></script>

<script src="/js/RGraph.bar.js" ></script>

<script type="text/javascript">

var drawGraph = function(){

var canvas = document.getElementById('sales');

var context = canvas.getContext('2d');

 

function canvasGraph(){

var title = $('#graph_data h1').text();

 

var labels = $("#graph_data>ul>li>p[data-name]").map(function(){

return $(this).attr("data-name");

});

 

var percents = $("#graph_data>ul>li>p[data-percent]").map(function(){

return parseInt($(this).attr("data-percent"));

});

 

var bar = new RGraph.Bar('sales', percents);

bar.Set('chart.gutter', 50);

bar.Set('chart.colors', ['blue']);

bar.Set('chart.title', title);

bar.Set('chart.labels', labels);

bar.Draw();

}

var canvas = document.getElementById('sales');

if (canvas.getContext){

$('#graph_data').hide();

canvasGraph();

}

};

$(function(){

var canvas = document.getElementById('sales');

if (canvas.getContext){

drawGraph();

}

});

</script>

</head>

<body>

<canvas id="sales" width="500" height="200">

Fallback content here

</canvas>

<div id="graph_data">

<h1>Browser share for this site</h1>

<ul>

<li>

<p data-name="Safari 4" data-percent="15">

Safari 4 - 15%

</p>

</li>

<li>

<p data-name="Internet Explorer" data-percent="55">

Internet Explorer - 55%

</p>

</li>

<li>

<p data-name="Firefox" data-percent="14">

Firefox - 14%

</p>

</li>

<li>

<p data-name="Google Chrome" data-percent="16">

Google Chrome - 16%

</p>

</li>

</ul>

</div>

</body>

</html>

Demo


Now that you know a little about how the canvas works, you can start thinking of other ways you might use it. You could use it to create a game, create a user interface for a media player, or use it to build a better image gallery. All you need to start painting is a little bit of JavaScript and a little bit of imagination.